page,
view,
scroll-view,
swiper,
swiper-item,
movable-area,
movable-view,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkbox-group,
checkbox,
form,
input,
label,
picker,
picker-view,
radio-group,
radio,
slider,
switch,
textarea,
navigator,
functional-page-navigator,
image,
video,
camera,
live-player,
live-pusher,
map,
canvas,
open-data,
web-view,
ad {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.flexBasis(@i) when(@i <=96) {
  .basis-@{i} {
    flex-basis: @i*2 + 0rpx;
  }

  .flexBasis((@i + 2));
}

.flexBasis(0);

.flexGap(@i) when(@i <=20) {
  .gap-@{i} {
    gap: @i*2 + 0rpx;
  }

  .flexGap((@i + 2));
}

.flexGap(2);

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.w-full {
  width: 100%;
}

.width(@i) when(@i <=50) {
  .w-@{i} {
    width: @i*2 + 0rpx;
  }

  .width((@i + 1));
}

.width(2);

.h-full {
  height: 100%;
}

.height(@i) when(@i <=50) {
  .h-@{i} {
    height: @i*2 + 0rpx;
  }

  .height((@i + 1));
}

.height(2);

.padding(@i) when(@i <=40) {
  .pd-@{i} {
    padding: @i*2 + 0rpx;
  }

  .padding((@i + 1));
}

.padding(2);

.paddingX(@i) when(@i <=40) {
  .px-@{i} {
    padding-left: @i*2 + 0rpx;
    padding-right: @i*2 + 0rpx;
  }

  .paddingX((@i + 1));
}

.paddingX(2);

.paddingY(@i) when(@i <=40) {
  .py-@{i} {
    padding-top: @i*2 + 0rpx;
    padding-bottom: @i*2 + 0rpx;
  }

  .paddingY((@i + 1));
}

.paddingY(2);

.margin(@i) when(@i <=40) {
  .m-@{i} {
    margin: @i*2 + 0rpx;
  }

  .margin((@i + 1));
}

.margin(2);

.marginX(@i) when(@i <=40) {
  .mx-@{i} {
    margin-left: @i*2 + 0rpx;
    margin-right: @i*2 + 0rpx;
  }

  .marginX((@i + 1));
}

.marginX(2);

.marginY(@i) when(@i <=40) {
  .my-@{i} {
    margin-top: @i*2 + 0rpx;
    margin-bottom: @i*2 + 0rpx;
  }

  .marginY((@i + 1));
}

.marginY(2);

.text-center {
  text-align: center;
}

.fontSize(@i) when(@i <=80) {
  .text-@{i} {
    font-size: @i*2 + 0rpx;
  }

  .fontSize((@i + 1));
}

.fontSize(12);

.fontWeight(@i) when(@i <=900) {
  .font-@{i} {
    font-weight: @i;
  }

  .fontWeight((@i + 100));
}

.fontWeight(100);

.text-clip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.textClip(@i) when(@i <=5) {
  .text-hide-@{i} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @i;
    /* 限制在一个块元素显示的文本的行数 */
    overflow: hidden;
  }

  .textClip((@i + 1));
}

.textClip(2);